<div class="">
	
	<div >
		<table>
			<foreach name="spec" item="vo">
			<tr style="height: 50px">
				<td width="60px"><label>{$vo.spec_name}</label></td>
				<td class="spec-item">
					<foreach name="vo['items']" item="val" key="k2">
						<a href="javascript:;" class="btn btn-default fl spec-item-btn <?php
                             if(in_array($k2,$items_ids))
                                    echo 'btn-success';
                             else
                                echo 'btn-default';
                             ?>" data-spec_id="{$vo['id']}" data-item_id='{$k2}'>{$val}</a>

					</foreach>
				</td>
			</tr>
			</foreach>
		</table>
	</div>
</div>
<div ><div class="controls"><div id="goods_spec_table2"> <!--ajax 返回 规格对应的库存--> </div></div></div>
<script type="text/javascript">
	 // 按钮切换 class
   $(".spec-item-btn").click(function(){
	   if($(this).hasClass('btn-success'))
	   {
		   $(this).removeClass('btn-success');
		   $(this).addClass('btn-default');		   
	   }
	   else
	   {
		   $(this).removeClass('btn-default');
		   $(this).addClass('btn-success');		   
	   }
	   ajaxGetSpecInput();	  	   	 
	});
	
	/**
*  点击商品规格触发 下面输入框显示
*/
function ajaxGetSpecInput()
{
//	  var spec_arr = {1:[1,2]};// 用户选择的规格数组 	  
//	  spec_arr[2] = [3,4]; 
	  var spec_arr = {};// 用户选择的规格数组 	  	  
	// 选中了哪些属性	  
	$(".spec-item-btn").each(function(){
	    if($(this).hasClass('btn-success'))	
		{
			var spec_id = $(this).data('spec_id');
			var item_id = $(this).data('item_id');
			if(!spec_arr.hasOwnProperty(spec_id))
				spec_arr[spec_id] = [];
		    spec_arr[spec_id].push(item_id);
			console.log(spec_arr);
		}		
	});
	ajaxGetSpecInput2(spec_arr); // 显示下面的输入框
	
}
	
	
/**
* 根据用户选择的不同规格选项 
* 返回 不同的输入框选项
*/
function ajaxGetSpecInput2(spec_arr)
{		

    var goods_id = $("input[name='id']").val();

	$.ajax({
			type:'POST',
			data:{'spec_arr':spec_arr,goods_id:goods_id},
			//url:"/index.php/admin/Goods/ajaxGetSpecInput/goods_id/"+goods_id,
			url:"{:url('AdminGoods/ajaxGetSpecInput')}",
			success:function(data){                            
				   $("#goods_spec_table2").html('');
				   $("#goods_spec_table2").append(data);
				   hbdyg();  // 合并单元格
			}
	});
}
	
 // 合并单元格
 function hbdyg() {
            var tab = document.getElementById("spec_input_tab"); //要合并的tableID
            var maxCol = 2, val, count, start;  //maxCol：合并单元格作用到多少列  
            if (tab != null) {
                for (var col = maxCol - 1; col >= 0; col--) {
                    count = 1;
                    val = "";
                    for (var i = 0; i < tab.rows.length; i++) {
                        if (val == tab.rows[i].cells[col].innerHTML) {
                            count++;
                        } else {
                            if (count > 1) { //合并
                                start = i - count;
                                tab.rows[start].cells[col].rowSpan = count;
                                for (var j = start + 1; j < i; j++) {
                                    tab.rows[j].cells[col].style.display = "none";
                                }
                                count = 1;
                            }
                            val = tab.rows[i].cells[col].innerHTML;
                        }
                    }
                    if (count > 1) { //合并，最后几行相同的情况下
                        start = i - count;
                        tab.rows[start].cells[col].rowSpan = count;
                        for (var j = start + 1; j < i; j++) {
                            tab.rows[j].cells[col].style.display = "none";
                        }
                    }
                }
            }
        }
</script>